<template>
  <div class="ly-content">
    <div class="ly-center">
      <yd-cell-group>
        <yd-cell-item arrow @click.native="goOwnInfo()">
          <span slot="left">我</span>
        </yd-cell-item>
      </yd-cell-group>

      <yd-cell-group title="我的成员(左滑可删除成员)">
        <slip-del v-for="item in memberList" :key="item.id" ref="slipDel" del-text="删除房间" @slip-open="slipOpen"
                  @del-click="delMember(item.id)" >
          <div class="demo-item">
            <yd-cell-item arrow @click.native="goModifyMember(item.id)">
              <span slot="left">{{item.userName}}</span>
            </yd-cell-item>
          </div>
          <div slot="del" style="line-height: 1rem;text-align: center;">删除成员</div>
        </slip-del>
      </yd-cell-group>


      <yd-button type="primary" class="ly-btn" size="large" @click.native="addMember()">添加成员</yd-button>

    </div>


  </div>


</template>

<script>
  import http from "../../http";
  import SlipDel from 'vue-slip-delete';

  export default {
    components: {
      SlipDel
    },
    data() {
      return {
        memberList: [],
      }
    },
    created: function () {
      this.init();
    },
    mounted: function () {
      // this.getUser();
    },
    methods: {


      slipOpen(vm) {
        // 无需手动关闭
      },

      delMember(id) {
        // 删除回调
        http.get("/communityApps/personalCenter/member?id=" + id).then(res => {
          if (res.data.code == 20000) {
            this.$dialog.toast({
              mes: '删除成功',
              timeout: 1500,
              icon: 'success',
              callback: () => {
                this.init();
              }
            });
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },


      // 请求数据
      init: function () {
        http.get("/communityApps/personalCenter/members").then(res => {
          console.log(res);
          if (res.data.code == 20000) {
            this.memberList = res.data.data;
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },
      addMember: function () {
        this.$router.push("/user/memberInfo");
      },
      goOwnInfo: function () {
        this.$router.push("/user/ownInfo");
      },
      goModifyMember: function (id) {
        this.$router.push({path: '/user/modifyMember', query: {id: id,}});
      }

    }
  }
</script>

<style scoped>
  .ly-btn {
    width: 86%;
    margin: 0.5rem auto 0;
  }
</style>



